import '../ui/layui.all'
import '../ui/css/layui.css'
import '../ui/css/modules/code.css'
import '../ui/css/modules/layer/default/layer.css'
import '../ui/css/modules/laydate/default/laydate.css'
import './editmodel.css'
import { Cartesian3,Matrix4,Matrix3,Math,Transforms,HeadingPitchRoll} from 'cesium';
const editModel = function(views){
    this.views = views
    var self = this
    this.data = null
    this.isactive = false
    this.temp = '<div class="cesium-widget-title">'+
    '<div class="title-info">模型调整</div>'+
    '<div class="title-btn">'+
        '<i class="layui-icon layer-btn layui-icon-close" data-method="close"></i>'+
   '</div></div>'+
    '<div class="cesium-widget-cont">'+
        '<ul class="tools-group">'+
        '<li title="经度"><span>经度</span><input  type="number" id="inputlng" data-method="lngchange" class="numitem layui-input" /></li>'+
        '<li title="纬度"><span>纬度</span><input  type="number" id="inputlat" data-method="latchange" class="numitem layui-input" /></li>'+
        '<li title="高度"><span>高度</span><div id="slideheight" class="demo-slider"></div></li>'+
        '<li title="X轴旋转"><span>X轴旋转</span><div id="slideXroute" class="demo-slider"></div></li>'+
        '<li title="Y轴旋转"><span>Y轴旋转</span><div id="slideYroute" class="demo-slider"></div></li>'+
        '<li title="Z轴旋转"><span>Z轴旋转</span><div id="slideZroute" class="demo-slider"></div></li>'+
    '</ul>'+
    '</div>'
    this.contanner = this._drawWidget()
    
    this.modelConfig = null
    this.editM = null
}
editModel.prototype={
    openWidget:function(){
        this.contanner.style.display = "block"
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
    },
    _drawWidget:function(){
        if(!document.getElementById("editModel")){
            var dom =  document.createElement("div");
            dom.className = "cesium-widget";
            dom.id="editModel"
            dom.innerHTML = this.temp;
            // var body = document.getElementsByTagName("body")[0];
            // body.appendChild(dom);
            var ViewDom = this.views.container
            ViewDom.appendChild(dom);
            this._bind()
            //让组件可以拖动，只在父容器中，并只能点击.cesium-widget-title拖动
            $('#editModel').draggabilly({ containment: true , handle: '.cesium-widget-title' });
            return dom
        }
    },
    //开始编辑
    startEdit:function(type,model,config){
        if(type == "dtiles" || type == "gltf"){
            this.openWidget()
            this.editM = model
            this.modelConfig = {
                type:type,
                lng: config.x,  //模型中心X轴坐标（经度，单位：十进制度）
                lat: config.y,  //模型中心Y轴坐标（纬度，单位：十进制度）
                height: config.z,    //模型中心Z轴坐标（高程，单位：米）
                roll: config.roll || 0,    //X轴（经度）方向旋转角度（单位：度）
                pitch: config.pitch || 0,    //Y轴（纬度）方向旋转角度（单位：度）
                heading: config.heading || 0,     //Z轴（高程）方向旋转角度（单位：度）
                scale:config.scale || 1
            }
            // this.slidelng.setValue(this.modelConfig.lng)
            // this.slidelat.setValue(this.modelConfig.lat)
            $('#inputlng').val(this.modelConfig.lng);
            $('#inputlat').val(this.modelConfig.lat);
            this.slideheight.setValue(this.modelConfig.height)
            this.slideXroute.setValue(this.modelConfig.roll<0?this.modelConfig.roll+360:this.modelConfig.roll)
            this.slideYroute.setValue(this.modelConfig.pitch<0?this.modelConfig.pitch+360:this.modelConfig.pitch)
            this.slideZroute.setValue(this.modelConfig.heading<0?this.modelConfig.heading+360:this.modelConfig.heading)
        }
        
        // this.slideScale.setValue(this.modelConfig.scale)
    },
    //报错编辑
    saveEdit:function(){

    },
    _bind:function(){
        if(!this.isactive){
            this.isactive = true
        var slider = layui.slider;
        var self = this
        var active = {
            close:function(){
                self.closeWidget()
            },
            lngchange:function(value){
                // console.log(value)
                self.modelConfig.lng = parseFloat(value)
                self.updateModel(self.editM,self.modelConfig)
            },
            latchange:function(value){
                self.modelConfig.lat =  parseFloat(value)
                self.updateModel(self.editM,self.modelConfig)
            }
        }
        $('#editModel .layer-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        // this.slidelat = slider.render({
        //     elem: '#slidelat'
        //     ,min: 0 //最小值
        //     ,step:0.1
        //     ,max: 90 //最大值
        //     ,tips: true //关闭默认提示层
        //     ,change: function(value){
        //       self.modelConfig.lat = value
        //       self.updateModel(self.editM,self.modelConfig)
        //     }
        // });
        // this.slidelng = slider.render({
        //     elem: '#slidelng'
        //     ,min: 0 //最小值
        //     ,step:0.1
        //     ,max: 180 //最大值
        //     ,tips: true //关闭默认提示层
        //     ,change: function(value){
        //       self.modelConfig.lng = value
        //       self.updateModel(self.editM,self.modelConfig)
        //     }
        // });
        this.slideheight = slider.render({
            elem: '#slideheight'
            ,min: 0 //最小值
            ,max: 1000 //最大值
            ,input:true
            // ,value:0
            ,tips: true //关闭默认提示层
            ,change: function(value){
              self.modelConfig.height = value
              self.updateModel(self.editM,self.modelConfig)
            }
        });
        this.slideXroute = slider.render({
            elem: '#slideXroute'
            ,min: 0 //最小值
            ,max: 360 //最大值
            // ,value:0
            ,input:true
            ,tips: true //关闭默认提示层
            ,change: function(value){
              self.modelConfig.roll = value
              self.updateModel(self.editM,self.modelConfig)
            }
        });
        this.slideYroute = slider.render({
            elem: '#slideYroute'
            ,min: 0 //最小值
            ,max: 360 //最大值
            ,input:true
            // ,value:0
            ,tips: true //关闭默认提示层
            ,change: function(value){
                self.modelConfig.pitch = value
                self.updateModel(self.editM,self.modelConfig)
            }
        });
        this.slideZroute = slider.render({
            elem: '#slideZroute'
            ,min: 0 //最小值
            ,max: 360 //最大值
            ,input:true
            // ,value:0
            ,tips: true //关闭默认提示层
            ,change: function(value){
                self.modelConfig.heading = value
                self.updateModel(self.editM,self.modelConfig)
            }
        });
        // this.slideScale = slider.render({
        //     elem: '#slideScale'
        //     ,min: 0 //最小值
        //     ,step: 0.1 //步长
        //     ,max: 10 //最大值
        //     ,tips: true //关闭默认提示层
        //     ,change: function(value){
        //       self.modelConfig.scale = value
        //       self.updateModel(self.editM,self.modelConfig)
        //     }
        // });
        $('#editModel .layui-input').on('change', function(e){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, e.delegateTarget.value) : '';
        });
        }
    },
    //更新编辑模型
    updateModel:function(model,config){
        if(config.type == "gltf"){
            this.updateMpdelgltf(model,config)
        }else{
            this.updateModeldtiles(model,config)
        }
    },
    //更新gltf
    updateMpdelgltf:function(entity,params){
        var position = Cartesian3.fromDegrees(params.lng, params.lat, params.height);
        var heading = Math.toRadians(params.heading||0);
        var pitch = Math.toRadians(params.pitch||0);
        var roll = Math.toRadians(params.roll||0);
        var hpr = new HeadingPitchRoll(heading, pitch, roll);
        var orientation = Transforms.headingPitchRollQuaternion(position, hpr);
        entity.orientation = orientation
        entity.position = position
        entity.scale = params.scale || 1
        // this.views.zoomTo(entity);
    },
    //更新3dtiles
    updateModeldtiles:function(tileset,params){
        var mx = Matrix3.fromRotationX(Math.toRadians(params.roll));
            var my = Matrix3.fromRotationY(Math.toRadians(params.pitch));
            var mz = Matrix3.fromRotationZ(Math.toRadians(params.heading));
            var rotationX = Matrix4.fromRotationTranslation(mx);
            var rotationY = Matrix4.fromRotationTranslation(my);
            var rotationZ = Matrix4.fromRotationTranslation(mz);
            //平移
            var position = Cartesian3.fromDegrees(params.lng, params.lat, params.height);
            var m = Transforms.eastNorthUpToFixedFrame(position);
            Matrix4.multiplyByUniformScale(m, params.scale, m);
            //旋转、平移矩阵相乘
            Matrix4.multiply(m, rotationX, m);
            Matrix4.multiply(m, rotationY, m);
            Matrix4.multiply(m, rotationZ, m);
            //赋值给tileset
            tileset._root.transform = m;
        // this.views.zoomTo(tileset);
    }
}
export default editModel